<script setup lang="ts">
import { ref } from 'vue'
import BasicDemo from './views/BasicDemo.vue'
import MultiHeaderDemo from './views/MultiHeaderDemo.vue'
import CellMergeDemo from './views/CellMergeDemo.vue'
import ImportDemo from './views/ImportDemo.vue'
import VirtualScrollDemo from './views/VirtualScrollDemo.vue'
import DragDemo from './views/DragDemo.vue'
import ComprehensiveDemo from './views/ComprehensiveDemo.vue'
</script>

<template>
  <div class="container">
    <!-- 其他单一组件 -->
    <el-tabs type="border-card" v-if="false">
      <el-tab-pane label="基本功能">
        <BasicDemo />
      </el-tab-pane>
      <el-tab-pane label="多级表头">
        <MultiHeaderDemo />
      </el-tab-pane>
      <el-tab-pane label="行列合并">
        <CellMergeDemo />
      </el-tab-pane>
      <el-tab-pane label="Excel导入">
        <ImportDemo />
      </el-tab-pane>
      <el-tab-pane label="大数据虚拟滚动">
        <VirtualScrollDemo />
      </el-tab-pane>
      <el-tab-pane label="行拖拽">
        <DragDemo />
      </el-tab-pane>
    </el-tabs>
    <!-- 单一组件合并后的综合组件 -->
    <ComprehensiveDemo />
  </div>
</template>

<style>
.container {
  margin: 0 auto;
  padding: 20px;
}
</style>
